<template>
  <!--创建一个echarts的容器-->
  <div ref="chart" :style="{width: width, height: height}" class="line-echart"></div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/views/dashboard/mixins/resize'

require('echarts/theme/macarons')
export default {
  name: 'LineEchart',
  mixins: [resize],
  props: {
    seriesData: { // 需要显示的数据
      type: Array,
      default: function () {
        return [22, 40, 62, 26, 52, 46]
      }
    },
    width: {
      type: String,
      default: '100%'
    },
    height: { // 高度
      type: String,
      default: '550px'
    },
    option: {
      type: Object,
      default: function () {
        return {}
      }
    },
    monitor: {
      type: Boolean,
      default: false
    },
    event: {
      type: String
    }
  },
  data() {
    return {
      chart: undefined
    };
  },
  computed: {
    comp_option() {
      let obj = {
        tooltip: {
          trigger: 'axis',
          enterable: true,
          triggerOn: "mousemove",
          axisPointer: {
            animation: true,
            type: 'cross',
            lineStyle: {
              color: '#376df4',
              width: 2,
              opacity: 1
            }
          },
          formatter: function (params) {
            //修改鼠标划过显示为中文
            //开盘收盘最低最高数据汇总
            let text = ''
            console.log(params)
            let currentItemText = params[0].data.text;
            if (currentItemText !== null) {
              for (let index in currentItemText) {
                text += currentItemText[index].label + ":" + currentItemText[index].value + '<br>'
              }
            }
            text += params[0].seriesName + ":" + params[0].data.value
            return params[0].name + '<br>' + text
          }
        },
        grid: { // 图表离面板的距离
          top: '24px',
          left: '12px',
          right: '50px',
          bottom: '0',
          containLabel: true,
        },
        xAxis: {
          type: 'time',
          boundaryGap: false, // 是否断点连线
          axisLine: {
            show: false,  // 这里的show用于设置是否显示y轴那一条线 默认为true
          },
          axisTick: {
            show: false,  // 是否显示刻度线 默认为true
            alignWithLabel: true
          },
          // nameGap: 20
        },
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              fontSize: 14,
              align: 'middle',
            },
            nameLocation: 'end', // 位置在顶部
            nameGap: 30, // 与y轴距离
            nameRotate: 0, // 角度
            min: 0,
            axisLabel: {
              margin: 20,
              show: true,
              interval: 1,
              // formatter: '{value}%'
            },
            axisLine: {
              show: false,  // 这里的show用于设置是否显示y轴那一条线 默认为true
            },
            axisTick: {
              show: false,  // 是否显示刻度线 默认为true
              alignWithLabel: true
            },
            splitLine: {    // 网格线
              lineStyle: {
                type: 'dashed'    // 设置网格线类型 dotted：虚线   solid:实线
              },
              show: true // 隐藏或显示
            },
          },
        ],
      }
      this.mergeOption(obj, this.option)
      return obj
    }
  },
  watch: {
    seriesData: {
      deep: true,
      handler(val) {
        this.setOption(val)
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    // 绘制图表
    this.init()
    this.setOption(this.seriesData)
    const emit = params => {
      this.$emit('clicked', params)
    }
    this.chart.on('click', emit)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    init(beforeFn = function () {
    }) {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart)
      }
      let finalOptions = beforeFn.call(this, this.comp_option) || this.comp_option
      this.chart.setOption(finalOptions)
    },
    setOption(data) {
      console.log(data)
      if (!data) return
      this.chart.setOption({
        ...this.comp_option,
        series: data
      })
    },
    mergeOption(defOption, newOption) {
      for (const [k, v] of Object.entries(newOption)) {
        if (Reflect.has(defOption, k)) {
          let type = Object.prototype.toString.call(v)
          type = type.split(' ')[1].split(']')[0]
          switch (type) {
            case 'Object':
              let defType = Object.prototype.toString.call(defOption[k])
              defType = defType.split(' ')[1].split(']')[0]
              if (defType === 'Object') {
                this.mergeOption(defOption[k], v)
              } else {
                defOption[k] = v
              }
              break
            default:
              defOption[k] = v
              break
          }
        } else {
          defOption[k] = v
        }
      }
    },
    getDataURL() {
      return this.chart.getDataURL()
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
